<template>
  <div>
    <el-dialog :title="operateType === 'add' ? '新增角色' : '更新角色'" :visible.sync="isShow">
      <common-form :formLabel="opertateFormLabel" :form="operateForm" :inline="true" ref="form">
      </common-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" @click="confirm(operateForm)">确定</el-button>
      </div>
    </el-dialog>
    <div class="manage-header">
      <el-button type="primary" @click="addRole">新增</el-button>
      <common-form :formLabel="formLabel" :form="searchFrom" :inline="true" ref="form">
        <el-button type="primary" @click="getList()">搜索</el-button>
      </common-form>
    </div>
    <role-Table @changePage="getList()" :tableData="tableData" :options="options" :config="config" @edit="editRole"
      @del="delRole" @roleSave="roleSave" :vis="vis" :entity="entity" @updateRole="updateRole" @visfis="visfis">
    </role-Table>
  </div>
</template>

<script>
import CommonForm from '@/views/CommonForm.vue'
import RoleTable from '@/views/RoleTable.vue'
import { getRoleList, getRoleSave, getRoleUpdate, delRole, RoleAndPer } from '@/api/role'
import { PermissionList } from '@/api/permissions'
export default {
  name: 'RoleName',
  components: {
    CommonForm,
    RoleTable
  },
  data() {
    return {
      operateType: 'add',
      isShow: false,
      opertateFormLabel: [{
        model: 'name',
        label: '角色名称',
        type: 'input'
      }, {
        model: 'description',
        label: '角色描述',
        type: 'input'
      }],
      operateForm: {
        name: '',
        description: '',
      },
      tableData: [],
      options: [],
      config: {
        total: 0,
        page: 1,
        pageSize: 6,
      },
      formLabel: [{
        model: 'keyword',
        label: '',
        type: 'input'
      }],
      searchFrom: {
        keyword: ''
      },
      vis: false,
      entity: {},

    }
  },
  methods: {
    getList() {
      const params = {
        page: this.config.page,
        pageSize: this.config.pageSize,
        name: this.searchFrom.keyword ? this.searchFrom.keyword : undefined
      }
      getRoleList(params).then(res => {
        if (res.status===200) {
          this.tableData = res.data.data.page.records
          this.config.total = res.data.data.page.total
          console.log(this.tableData);
        } else {
          this.$message.error(res.msg || '操作失败')
        }
      }).catch(err => {
        this.$message.error('请求出错了：' + err)
      })
      PermissionList().then(res => {
        if (res.status===200) {
          this.options = res.data.data.list
        } else {
          this.$message.error(res.msg || '操作失败')
        }
      }).catch(err => {
        this.$message.error('请求出错了：' + err)
      })

    },
    visfis() {
      this.vis = false
    },
    addRole() {
      this.isShow = true
      this.operateType = 'add'
      this.operateForm = {
        name: '',
        description: '',
      }
    },
    editRole(row) {
      this.isShow = true
      this.operateType = 'edit'
      this.operateForm = row
    },
    updateRole(row) {
      this.vis = false,
        console.log(row);
      RoleAndPer(row).then(res => {
        if (res.status===200) {
          this.$message.success("更新成功")
          this.getList();
        } else {
          this.$message.error(res.data.msg || "操作失败")
        }
      }).catch(err => {
        this.$message.error('请求出错了：' + err)
    })
  },
  confirm(value) {
    if (this.operateType === 'add') {
      getRoleSave(value).then(res => {
        if (res.status===200) {
          this.$message.success("新增成功")
          this.isShow = false
          this.getList();
        } else {
          this.$message.error(res.data.msg || "操作失败")
          this.isShow = false
        }
      }).catch(err => {
        this.$message.error('请求出错了：' + err)
        this.isShow = false
      })
    } else {
      getRoleUpdate(value).then(res => {
        if (res.status===200) {
          this.$message.success("更新成功")
          this.isShow = false
          this.getList();
        } else {
          this.$message.error(res.data.msg || "操作失败")
          this.isShow = false
        }
      }).catch(err => {
        this.$message.error('请求出错了：' + err)
        this.isShow = false
      })

    }
  },
  delRole(row) {
    this.$confirm("此操作将永久删除该商品，是否继续?", "提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning"
    }).then(() => {
      delRole({ 'id': row.id }).then(res => {
        if (res.data.code === 1) {
          this.$message.success('删除成功！')
          this.getList()
        } else {
          this.$message.error(res.data.msg || '操作失败')
        }
      })
    })
  },
  roleSave(row) {
    this.entity = JSON.parse(JSON.stringify(row))
    console.log(this.entity);
    this.vis = true;
  }
},
created() {
  this.getList();
},
}
</script>

<style>
.manage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
